<template>
  <a-form :form="form" @submit="handleSubmit">

    <a-form-item v-bind="formItemLayout">
      <span slot="label">
        用户名：&nbsp;
        <a-tooltip title="What do you want others to call you?">
          <a-icon type="question-circle-o" />
        </a-tooltip>
      </span>
      <a-input v-model="username"
      />
    </a-form-item>
    <a-form-item v-bind="formItemLayout" label="密码" has-feedback>
      <a-input v-model="password"
      />
    </a-form-item>
    <!-- <a-form-item v-bind="formItemLayout" label="确认密码" has-feedback>
      <a-input v-model="password"

      />
    </a-form-item> -->
    <a-form-item v-bind="formItemLayout" label="邮箱">
      <a-input v-model="email"
      />
    </a-form-item>


    <a-form-model-item v-bind="formItemLayout" label="手机号">
      <a-input v-model="phone">
      </a-input>
    </a-form-model-item>
    <a-form-model-item v-bind="formItemLayout" label="验证码">
      <a-input v-model='imgCode'>
      </a-input>
    </a-form-model-item>
    <a-form-item
      v-bind="formItemLayout"
      label="手机验证码"
      extra="需要验证是否是你本人操作"
    >
      <a-row :gutter="8">
        <a-col :span="12">
          <a-input
            v-model="code"
          />
        </a-col>
        <img
            class="verify-code"
            :src="imgUrl"
            @click="getImgUrl"
              >
        <a-col :span="12">
          <a-button @click="sendcode">获取验证码</a-button>
        </a-col>
      </a-row>
    </a-form-item>
    <a-form-item v-bind="tailFormItemLayout">
      <a-checkbox v-decorator="['agreement', { valuePropName: 'checked' }]">

        <a href="">
          我已阅读本协议
        </a>
      </a-checkbox>
    </a-form-item>
    <a-form-item v-bind="tailFormItemLayout">
      <a-button type="primary" html-type="submit" @click="btn">
        注册
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
const residences = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];
import axios from 'axios'
export default {
  data() {
    return {
      code:'',
      imgCode:'',
      username:'',
      phone:'',
      password:'',
      email:'',
      imgUrl:'',
      confirmDirty: false,
      residences,
      autoCompleteResult: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      },
    };
  },
  mounted() {

  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'register' });
  },
  methods: {
    btn(){
      axios.post('http://127.0.0.1:8000/user/register/',{'username':this.username,'password':this.password,'phone':this.phone,'code':this.code,'email':this.email}).then(res=>{
        alert(res.data.msg)
        this.$router.push('/login')
      })
    },
    sendcode() {
      this.is_send = true
      console.log("开始发送短信")
      axios.post('http://127.0.0.1:8000/verify/sms_codes/',{'phone':this.phone,'image_code_uuid':this.uuid,'image_code':this.imgCode}).then((res) => {
        console.log(res.data.msg)
      })
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    },
    handleConfirmBlur(e) {
      const value = e.target.value;
      this.confirmDirty = this.confirmDirty || !!value;
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue('password')) {
        callback('Two passwords that you enter is inconsistent!');
      } else {
        callback();
      }
    },
    validateToNextPassword(rule, value, callback) {
      const form = this.form;
      if (value && this.confirmDirty) {
        form.validateFields(['confirm'], { force: true });
      }
      callback();
    },
    handleWebsiteChange(value) {
      let autoCompleteResult;
      if (!value) {
        autoCompleteResult = [];
      } else {
        autoCompleteResult = ['.com', '.org', '.net'].map(domain => `${value}${domain}`);
      }
      this.autoCompleteResult = autoCompleteResult;
    },
    getUuid() {
      var d = new Date().getTime()
      if (window.performance && typeof window.performance.now === 'function') {
        d += performance.now()
      }
      var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = (d + Math.random() * 16) % 16 | 0
        d = Math.floor(d / 16)
        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16)
      })
      return uuid
    },
    getImgUrl() {
      let uuid = this.getUuid()
      console.log(uuid)
      this.uuid = uuid
      let url = 'http://127.0.0.1:8000/verify/image_codes/?uuid=' + uuid
      console.log(url)
      // let url = 'http://192.168.56.100:8888/verify/image_codes/?uuid=66ea64aa-fbe6-11ea-a3d3-005056c00008'
      this.imgUrl = url
    },
  },
  created() {
    this.getImgUrl()
  },
};
</script>
